@import "./theme/base-import.less";

@chatBarColor: #cccccc;
p {
  margin: 0;
}
.message-detail {
  background-color: #f4f5f9;
  height: auto;
  .chat-room {
    width: 100%;
    height: auto;
    padding: 0 12px;
    box-sizing: border-box;
    .chat-bar {
      background-color: #fff;
      max-height: 120px;
      width: 100%;
      border-top: 1px solid @chatBarColor;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .chat-text {
        flex: 1;
      }
      button /deep/ {
        width: 80px;
        height: 39px;
      }
    }
    .chat-desk {
      overflow: hidden;
      overflow-y: scroll;
      .pannel {
        background-color: #f4f5f9;
        padding: 6px 2px;
        box-sizing: border-box;
        font-size: 14px;
        .baseStyle {
          display: flex;
          margin: 4px 0;
          padding: 2px 3px;
          box-sizing: border-box;
          .user-avatar {
            width: 40px;
            height: 40px;
            overflow: hidden;
            border-radius: 50%;
            img, .svg {
              width: 100%;
              height: 100%;
            }
            img {
              object-fit: cover;
            }
          }
          .chat-detail {
            max-width: 10rem;
            margin-left: 10px;
            .user-chatTime {
              font-size: 12px;
              padding: 4px 0;
              margin: 2px 0;
              display: flex;
              .chat-time {
                color: #8c8c8c;
                padding: 0 4px;
              }
            }
            .content {
              padding: 10px;
              box-sizing: border-box;
              word-break: break-all;
            }
            .bubbles {
              border-radius: 6px;
              box-shadow: 1px 0px 6px 1px #d9d9d9;
            }
          }
        }
        .otherStyleBox {
          justify-content: flex-start;
          .user-avatar {
            order: 0;
          }
        }
        .selfStyleBox {
          justify-content: flex-end;
          .user-avatar {
            order: 1;
          }
          .user-chatTime {
            justify-content: flex-end;
          }
          .chat-detail {
            margin: 0 10px 0 0;
          }
        }
      }
    }
  }
}